<template>
<div class="about">
    <v-header />
    <el-container class="contaier">
        <v-sidebar />
        <el-main>
            <div class="content-box" :class="{ 'content-collapse': collapse }">
                <v-tags></v-tags>
                <div class="content" style="position: relative">
                    <router-view v-slot="{ Component }">
                        <transition name="fade-translateX" mode="out-in">
                            <keep-alive exclude="OperationRecords">
                                <component :is="Component" />
                            </keep-alive>
                        </transition>
                    </router-view>
                    <el-backtop target=".content"></el-backtop>
                </div>
            </div>
        </el-main>
    </el-container>

</div>
</template>

<script>
import {
    computed,
    onBeforeMount
} from "vue";
import {
    useStore
} from "vuex";
import vHeader from "../components/Header.vue";
import vSidebar from "../components/Sidebar.vue";
import vTags from "../components/Tags.vue";
import {

    useRouter
} from "vue-router";

import {
    getAssetsTypeConfigDataFn,
    getMaterialTypeConfigDataFn,
    getStorageTypeConfigDataFn,
} from "@/api/selectData/selectData";

import {
    getPermissionApi
} from "@/api/user";

export default {
    components: {
        vHeader,
        vSidebar,
        vTags,
    },
    setup() {
        const router = useRouter();
        const currentRoute = router.currentRoute.value.name;
        const store = useStore();
        const tagsLists = computed(() =>
            store.state.tagsLists.map((item) => item.name)
        );
        const collapse = computed(() => store.state.collapse);
 
        let userInfo = window.localStorage.getItem('userInfo');
        let user = JSON.parse(userInfo || '{}');

  

        return {
            tagsLists,
            collapse,
            router,
            currentRoute,
        };
    },
};
</script>

<style lang="less" scoped>
/*fade-translateX*/
.fade-translateX-leave-active,
.fade-translateX-enter-active {
    transition: all .5s ease;
}

.fade-translateX-enter {
    opacity: 0.1;
    transform: translateX(-100px);
}

.fade-translateX-leave-to {
    opacity: 0.1;
    transform: translateX(100px);
}

.contaier {
    display: flex;
    height: 100vh;
}

.content-box{
    height: 100%;
    //padding-bottom: 20px;
    //background: #eee;
}
.content{
    overflow: scroll;
    height: calc(100% - 100px);

}
.el-main {
    padding: 0;
    overflow: scroll;
}
</style>
